﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>备份日志</title>
    <script src="/Apm/js/CMSList.js"></script>
    <style>
        .page {
            height: 100%;
            overflow-y: auto;
            display: flex;
            padding:1rem 2rem;
        }
        .log-timeline-item{
            padding-bottom:0px;
        }
    </style>
</head>
<body>
    <div class="page">
        <ul id="UserLog" class="layui-timeline">
            <!--<li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月18日</h3>
                <p>
                    layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                    <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                    <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月16日</h3>
                <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
                <ul>
                    <li>《登高》</li>
                    <li>《茅屋为秋风所破歌》</li>
                </ul>
            </div>
        </li>

        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">过去</div>
            </div>
        </li>-->
        </ul>
    </div>
</body>
</html>
<script>
    layui.use('layer', function () {
        var layer = layui.layer;

        BindData();
    })

    /**
     * 获取备份日志
     */
    function LogDataBackup() {
        $("#UserLog").empty();
        layui.use('flow', function () {
            var flow = layui.flow;

            //流加载
            var pageSize = 15;//初始化默认显示15条
            ajaxget({
                url: 'api/Method/LogDataBackupGet?Token=' + MyPublic.getToken(),
                success: function (data) {

                    if (data == null) {
                        return;
                    }

                    var pagetotal = Math.ceil(data.length / pageSize);//总页数
                    
                    
                    flow.load({
                        elem: '#UserLog',
                        isLazyimg: false,//关闭图片懒加载
                        done: function (page, next) {
                            var lis = [];
                            for (var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {
                                
                                //组合html
                                lis.push('<li class="layui-timeline-item">');
                                lis.push('<i class="layui-icon layui-timeline-axis">&#xe63f;</i>');
                                lis.push('<div class="layui-timeline-content layui-text">');

                                lis.push('<h3 class="layui-timeline-title">' + MyPublic.getFnTime(data[index].DataBaseTime) + '</h3>');
                                lis.push('<p>');

                                switch (data[index].State) {
                                    case 0://备份失败
                                        lis.push('<span style="color:#FF5722">' + data[index].Remark + '</span></br>');
                                        break;
                                    case 1://备份成功
                                        lis.push('<span style="color:#5FB878">' + data[index].Remark + '</span></br>');
                                        break;
                                    case 2://服务开始
                                        lis.push('<span style="color:#1E9FFF">' + data[index].Remark + '</span></br>');
                                        break;
                                    case 3://服务停止
                                        lis.push('<span style="color:#FFB800">' + data[index].Remark + '</span></br>');
                                        break;

                                }
                                
                                lis.push('备份数据库：<span style="color:#009688">' + data[index].DataBaseName + '</span></br>');
                                lis.push('备份路径：' + data[index].DataBasePath + '</br>');
                                
                                lis.push('</p>');
                                lis.push('</div>');
                                lis.push(' </li>');

                            }

                            if (page+1 > pagetotal) {
                                lis.push('<li class="layui-timeline-item log-timeline-item">');
                                lis.push('<i class="layui-icon layui-timeline-axis">&#xe63f;</i>');
                                lis.push('<div class="layui-timeline-content layui-text">');
                                lis.push('<div class="layui-timeline-title">过去</div>');
                                lis.push('</div>');
                                lis.push('</li>');
                            }

                            next(lis.join(''), page < pagetotal);
                        }
                    });

                    
                }
            })
        });
    }
    

    /**
     * 初始化数据
     */
    function BindData() {
        LogDataBackup();
    }
</script>